<template>
  <Portlet title="商家信息">
    <el-form class="el-form-col el-form-s" ref="businessNameForm" :model="model" label-position="left" label-width="150px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="企业认证：">
            <span v-if="state == 4">你还未进行企业认证</span>
            <span v-if="state == 0">认证中</span>
            <span v-if="state == 1">已认证</span>
            <span v-if="state == 2">认证失败</span>
          </el-form-item>
        </el-col>
        <el-col :span="2" >
          <el-form-item>
            <el-button v-if="state == 4" type="text" @click="goProve()">去认证</el-button>
            <el-button v-if="state == 0 || state == 1" type="text" @click="showProve()">查看认证信息</el-button>
            <el-button v-if="state == 2" type="text" @click="showProve()">查看失败详情</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <!--显示 商家名称 和地区 showBusiness-->
      <el-row v-if="showBusiness">
        <el-col :span="6">
          <el-form-item label="商家名称：">
            <span>{{businessData.businessName}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item>
            <el-button type="text" @click="changeBtn()">修改</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="showBusiness">
        <el-col :span="6">
          <el-form-item label="所在地区：">
            <span> {{businessData.province}}{{businessData.city}}{{businessData.district}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <!--编辑 商家名称 和地区 !showBusiness-->
      <el-row v-if="!showBusiness">
        <el-col :span="8">
          <el-form-item label="商家名称" class="elMsg" prop="businessName" :rules="[
                              { required: true, message: '名称必须', trigger: 'blur', top: '126%'}
                            ]">
            <el-input v-model="model.businessName" class="goDown"></el-input>
            <i class="fa-icon fa-icon-little fa-icon-column-one" v-if="model.businessName"
               style="color:white;border-radius:8px; cursor:pointer;
                     position: absolute;right:12px;top:23px;" @click="clearName()"></i>
          </el-form-item>
        </el-col>
        <el-col :span="2" :offset="1">
          <el-button type="text"  @click.prevent="saveBusiness()" :loading="loading">保存</el-button>
        </el-col>
      </el-row>
      <el-row v-if="!showBusiness">
        <el-col :span="8">
          <el-form-item label="所在地区" prop="DAddress" :rules="[
                {required: true, message: '请选择提货省市区', type:'array', trigger: 'change'}
              ]">
            <CascadeAddress v-model="model.DAddress" :level="3"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </Portlet>
</template>
<script>
import CascadeAddress from '@/components/CascadeAddress'
import {dotData, copy} from '@/utils'
import {setUserInfoData} from '@/utils/auth'
export default {
  name: 'companyCertificationIndex',
  components: {
    CascadeAddress
  },
  data() {
    return {
      state: '',
      examineId: '', // 认证id
      loading: false,
      operationType: '',
      rowId: '', // 修改地址 当前行id
      showBusiness: true,
      dialogVisible: false, // el模态框
      userData: {},
      businessId: '',
      businessData: {},
      model: {
        businessName: '',
        DAddress: []
      },
      userId: '',
      addressDataArr: []
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getBaseData()
    // this.getUser()
  },
  methods: {
    // getUser() {
    //   this.$ajax.get('/ms-common-user/user/get-user').then(response => {
    //     if (response.success) {
    //       this.businessId = dotData(response, 'data.businessId')
    //     }
    //   })
    // },
    // 回填
    getBaseData() {
      this.$ajax.get('/ms-fahuobao-user/OutGoodsUser/findUserAll').then(response => {
        if (response.success) {
          // this.userData = response.FhbUser
          this.businessId = dotData(response, 'data.FhbUser.businessId')
          // console.log('businessId11111111111', this.businessId)
          this.getState()
          this.businessData = dotData(response, 'data.fhbBusinessInformation')
          // console.log('businessData', this.businessData)
          if (this.businessData.businessName) {
            this.model.businessName = dotData(this.businessData, 'businessName')
          }
          let backAddressArr = []
          if (dotData(this.businessData, 'provinceNo')) {
            backAddressArr.push(dotData(this.businessData, 'provinceNo'))
            if (dotData(this.businessData, 'cityNo')) {
              backAddressArr.push(dotData(this.businessData, 'cityNo'))
              if (dotData(this.businessData, 'districtNo')) {
                backAddressArr.push(dotData(this.businessData, 'districtNo'))
              }
            }
          }
          this.model.DAddress = backAddressArr
          console.log('backAddressArr', backAddressArr)
        }
      })
    },
    // 认证状态
    getState() {
      console.log('this.businessId', this.businessId)
      this.$ajax.get('/ms-fahuobao-user/OutGoodsUser/is-credential', {businessId: this.businessId}).then(response => {
        if (response.success) {
          let hasNoExamine = dotData(response, 'data.isCredential')
          let auditState = dotData(response, 'data.auditState')
          this.examineId = dotData(response, 'data.id')
          console.log('认证id11111111111', this.examineId)
          console.log('是否认证', hasNoExamine)
          if (!hasNoExamine) {
            this.state = 4 // 未认证
          } else {
            this.state = auditState
          }
          console.log('response', response)
        }
      })
    },
    clearName() {
      this.model.businessName = ''
    },
    changeBtn() {
      this.showBusiness = false
      // this.getBaseData()
    },
    // 去认证 编辑:
    goProve() {
      this.$router.push({path: '/ss-fhb/companyCertification/edit' + '/' + this.businessId})
      console.log('跳转到编辑页的路径')
    },
    // 查看 show 认证信息（已认证、认证中、认证失败）认证id+ 状态
    showProve() {
      // console.log('认证id222222222', this.examineId)
      this.$router.push({path: '/ss-fhb/companyCertification/show' + '/' + this.examineId + '/?state=' + this.state})
    },
    // 验证 商家名称 并提交
    saveBusiness() {
      this.$refs.businessNameForm.validate(result => {
        if (!result) {
          return
        }
        let postData = copy(this.model, true)
        postData.id = this.businessId
        postData.businessName = dotData(this.model, 'businessName')
        console.log('postData.DAddress', postData.DAddress)
        // 后端改接口为 只提交编号就可以了
        postData.provinceNo = postData.DAddress[0]
        postData.cityNo = postData.DAddress[1]
        postData.districtNo = postData.DAddress[2]
        // postData.provinceNo = postData.DAddress[0].id
        // postData.province = postData.DAddress[0].text
        // postData.cityNo = postData.DAddress[1].id
        // postData.city = postData.DAddress[1].text
        // postData.districtNo = postData.DAddress[2].id
        // postData.district = postData.DAddress[2].text
        delete postData.DAddress
        console.log('即将提交的data', postData)
        this.loading = true
        this.$ajax.post('/ms-fahuobao-user/OutGoodsUser/updateBusiness', postData).then(response => {
          const success = dotData(response, 'success')
          // 取出返回的用户name和token
          let name = dotData(response, 'data.user.name')
          let token = dotData(response, 'data.token')
          console.log(name, 'name', token)
          setUserInfoData(name, token)
          if (success) {
            this.$confirm('修改成功', '提示', {
              type: 'success',
              center: true,
              confirmButtonText: '确定',
              showCancelButton: false,
              closeOnClickModal: false
            }).then(_ => {
              this.loading = false
              console.log(this.id)
              this.$router.push({path: '/redirect/ss-fhb/companyCertification/index'})
            })
          } else {
            this.loading = false
          }
        })
      })
    }
  }
}
</script>
